import React, { Component } from 'react';
import styles from './index.less';
import { Carousel } from 'antd';
import { addMouseScrollListener } from '@/utils/index.js';
import {} from '@/components/Page1';
import Page1 from '../../components/Page1';
/**
 * 火狐和其他浏览器监听鼠标滚动的方法不同
 * 其他浏览器：window.onmousewheel,
 * e.wheelDelta<0 向下滚
 * firefox：window.addEventListener('DOMMouseScroll',function),
 * e.detail>0 向下滚
 */

let chageTimer = 0;

class Fullpage1 extends Component {
  componentDidMount() {
    addMouseScrollListener(this.handleMouseScroll);

    setInterval(() => {
      chageTimer++;
    }, 500);
  }

  handleMouseScroll = e => {
    const isFirefox =
      window.navigator.userAgent.toLocaleLowerCase().indexOf('firefox') > -1;
    if (chageTimer < 1) {
      return;
    }
    if (isFirefox) {
      if (e.detail < 0) {
        this.handlePre();
      } else if (e.detail > 0) {
        this.handleNext();
      }
    } else {
      if (e.wheelDelta < 0) {
        this.handleNext();
      } else if (e.wheelDelta > 0) {
        this.handlePre();
      }
    }
  };

  handlePre = () => {
    this.carousel && this.carousel.prev();
  };

  handleNext = () => {
    this.carousel && this.carousel.next();
  };

  handleAfterChange = current => {
    chageTimer = 0;
  };

  render() {
    return (
      <div className={styles.wrapper}>
        <Carousel
          dotPosition="right"
          dots={{
            className: styles.dots,
          }}
          ref={carousel => (this.carousel = carousel)}
          afterChange={this.handleAfterChange}
        >
          <div className={styles.page1}>
            <div className={styles.container}>
              <h2>我是第一页</h2>
              <h4>我是由antd 跑马灯组件实现的</h4>
              <Page1 />
            </div>
          </div>
          <div className={styles.page2}>
            <div className={styles.container}>
              <h2>我是第二页</h2>
              <h4>我是由antd 跑马灯组件实现的</h4>
            </div>
          </div>
          <div className={styles.page3}>
            <div className={styles.container}>
              <h2>我是第三页</h2>
              <h4>我是由antd 跑马灯组件实现的</h4>
            </div>
          </div>
          <div className={styles.page4}>
            <div className={styles.container}>
              <h2>我是第四页</h2>
              <h4>我是由antd 跑马灯组件实现的</h4>
            </div>
          </div>
        </Carousel>
      </div>
    );
  }
}

export default Fullpage1;
